<template>
	 <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    	<el-form-item label="运营商" prop="ispType">
        <el-select v-model="queryParams.ispType" placeholder="请选择">
			<el-option key="0" label="中国移动" value="移动"></el-option>
			<el-option key="1" label="中国联通" value="联通"></el-option>
			<el-option key="2" label="中国电信" value="电信"></el-option>
		</el-select>
      </el-form-item>
     <el-form-item label="套餐名称" prop="pricingName">
        <el-input
          v-model = 'queryParams.pricingName'
          placeholder="套餐名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="标准资费" prop="baseExpenses">
        <el-input
          v-model = 'queryParams.baseExpenses'
          placeholder="标准资费"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="套餐类型" prop="pricingType">
        <el-select v-model="queryParams.pricingType" placeholder="请选择">
			<el-option key="0" label="流量" value="0"></el-option>
			<el-option key="1" label="语音" value="1"></el-option>
			<el-option key="2" label="短信" value="2"></el-option>
			<el-option key="3" label="混合" value="3"></el-option>
		</el-select>
      </el-form-item>
      <el-form-item label="状态" prop="pricingStatus">
        <el-select v-model="queryParams.pricingStatus" placeholder="请选择状态">
			<el-option key="0" label="上架" value="0"></el-option>
			<el-option key="1" label="下架" value="1"></el-option>
		</el-select>
      </el-form-item>
      <el-form-item label="包体类型" prop="packageType">
        <el-select v-model="queryParams.packageType" placeholder="请选择包体类型">
			<el-option key="0" label="按自然月计费" value="0"></el-option>
			<el-option key="1" label="按年计费" value="1"></el-option>
		</el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" size="mini" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
     </el-form>
     
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-document-add"
          size="mini"
          @click='showAdd'
          v-hasPermi="['whty:pricing:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          v-hasPermi="['whty:pricing:export']"
          @click='daochu'
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-top"
          size="mini"
          v-hasPermi="['whty:pricing:upOrDown']"
          @click='upperShelf'
        >批量上架</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-bottom"
          size="mini"
          v-hasPermi="['whty:pricing:upOrDown']"
          @click='lowerShelf'
        >批量下架</el-button>
      </el-col>
     
    </el-row>
    
     <el-table v-loading="loading" :data="tcList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="套餐编号" align="center" prop="pricingId" />
      <el-table-column label="套餐名称" align="center" prop="pricingName" />
      <el-table-column label="标准资费(元)" align="center" prop="baseExpenses" />
      <el-table-column label="运营商类型" align="center" prop="ispType"  >
      	 <template slot-scope="scope">
          <el-tag v-if="scope.row.ispType=='移动'">移动</el-tag>
          <el-tag type="success" v-if="scope.row.ispType=='联通'">联通</el-tag>
          <el-tag type="info" v-if="scope.row.ispType=='电信'">电信</el-tag>
        </template> 
        </el-table-column>
	  <el-table-column label="包体类型" align="center" prop="packageType" >
	  	<template slot-scope="scope">
          <el-tag v-if="scope.row.packageType=='0'">按自然月计算</el-tag>
          <el-tag type="success" v-if="scope.row.packageType=='1'">按年计费</el-tag>
        </template> 
        </el-table-column>
	   <el-table-column label="套餐类型" align="center" prop="pricingType" > 
	  	<template slot-scope="scope">
          <el-tag v-if="scope.row.pricingType=='0'">流量</el-tag>
          <el-tag type="success" v-if="scope.row.pricingType=='1'">语音</el-tag>
          <el-tag type="info" v-if="scope.row.pricingType=='2'">短信</el-tag>
          <el-tag type="warning" v-if="scope.row.pricingType=='3'">混合</el-tag>
        </template> 
        </el-table-column>
        <el-table-column label="上游套餐编码" align="center" prop="upPricingid" />
        <el-table-column label="套餐来源" align="center" prop="upPlatform" />
		<el-table-column label="包含流量(MB)" align="center" prop="pricingFlow"  />
		<el-table-column label="包含短信(条)" align="center" prop="pricingSms"  />
		<el-table-column label="包含语音(分钟)" align="center" prop="pricingVoice"  />
		<el-table-column label="生效方式" align="center" prop="effectType" :formatter="effectTypeFn"  />
		<el-table-column label="状态" align="center" prop="pricingStatus" >
		<template slot-scope="scope">
          <el-tag v-if="scope.row.pricingStatus=='0'">上架</el-tag>
          <el-tag type="success" v-if="scope.row.pricingStatus=='1'">下架</el-tag>
        </template>
		</el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:bzzfgl:edit']"
            @click='editTaocan(scope.row.pricingId)'
          >修改</el-button>
        </template> 
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTcListFn"
    />
    
    <!-- 新增套餐-->
	        <el-dialog :title="title" :visible.sync="openTC" width="700px" :close-on-click-modal='false'>
    			<el-form ref="form" :rules="rules" :model="tcData" label-width="140px">
    				<el-form-item label="套餐名称" prop='pricingName'>
    				  <el-col :span='10'><el-input v-model="tcData.pricingName" placeholder="" /></el-col>
			        </el-form-item>
			        <el-form-item label="运营商类型" prop='ispType'>
			          <el-select v-model="tcData.ispType">
					     <el-option key="0" label="移动" value="移动"></el-option>
					     <el-option key="1" label="联通" value="联通"></el-option>
					     <el-option key="2" label="电信" value="电信"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="套餐类型" prop='pricingType'>
			          <el-select v-model="tcData.pricingType">
					     <el-option key="0" label="流量" value="0"></el-option>
					     <el-option key="1" label="语音" value="1"></el-option>
					     <el-option key="2" label="短信" value="2"></el-option>
					     <el-option key="3" label="混合" value="3"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="上游套餐编码" prop='upPricingid'>
			         	<el-col :span='10'><el-input v-model="tcData.upPricingid" /></el-col>
			        </el-form-item>
			        <el-form-item label="套餐来源" prop='upPlatform'>
			         	 <el-select v-model="tcData.upPlatform">
					     <el-option key="0" label="铭谦" value="mingqian"></el-option>
					     <el-option key="1" label="联通" value="liantong"></el-option>
					     <el-option key="2" label="阿里" value="ali"></el-option>
					  	 </el-select>
			        </el-form-item>
			         <el-form-item label="包含流量" prop='pricingFlow'>
			         	<el-col :span='10'><el-input v-model="tcData.pricingFlow" /></el-col>
			        </el-form-item>
			        <el-form-item label="包含语音(分钟)" prop='pricingVoice'>
			         	<el-col :span='10'><el-input v-model="tcData.pricingVoice" /></el-col>
			        </el-form-item>
			        <el-form-item label="包含短信(条)" prop='pricingSms'>
			         	<el-col :span='10'><el-input v-model="tcData.pricingSms" /></el-col>
			        </el-form-item>
			        <el-form-item label="包体类型" prop='packageType'>
			          <el-select v-model="tcData.packageType" @change = 'changePackageType'>
					     <el-option key="0" label="按自然月计费" value="0"></el-option>
					     <el-option key="1" label="按年计费" value="1"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="有效期" prop='validDate'>
			        	<el-row>
			        		<el-col :span='10'><el-input v-model="tcData.validDate" placeholder="" /></el-col>
			        		<el-col :span='4'>
			        		<el-select v-model="tcData.packageType" disabled >
						     <el-option key="0" label="月" value="0"></el-option>
						     <el-option key="1" label="年" value="1"></el-option>
					  		</el-select></el-col>
			        	</el-row>
			        </el-form-item>
			         <el-form-item label="是否基础套餐" prop='basePricingFlag'>
			          <el-select v-model="tcData.basePricingFlag">
					     <el-option key="0" label="是" value="0"></el-option>
					     <el-option key="1" label="否" value="1"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="标准资费" prop='baseExpenses'>
			        	<el-col :span='10'><el-input v-model="tcData.baseExpenses" placeholder="" width='300' /></el-col>
			        </el-form-item>
			        <el-form-item label="状态" prop='pricingStatus'>
			          <el-select v-model="tcData.pricingStatus">
					     <el-option key="0" label="上架" value="0"></el-option>
					     <el-option key="1" label="下架" value="1"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="生效类型" prop='effectTypeArr'>
			          <el-checkbox-group v-model="tcData.effectTypeArr">
					    <el-checkbox label="立即生效" value='0'></el-checkbox>
					    <el-checkbox label="次月生效" value='1'></el-checkbox>
					    <el-checkbox label="到期生效" value='2' ></el-checkbox>
					  </el-checkbox-group>
			        </el-form-item>
			       
			        <el-row><el-col :span='4' :offset='8'><el-button type="primary" @click='addItem'>确定</el-button></el-col><el-col :span='4'><el-button @click='cancle' type="">取消</el-button></el-col></el-row>
    			</el-form>
    		</el-dialog>
    </div>
</template>

<script>
	import {getTcList,addTcList,exportTcList,editTcList,editTcListone,upTcList} from "@/api/tczf/tc";
	export default{
		data(){
			return{
				queryParams:{
					pageNum:1,
					pageSize:10,
					ispType:undefined,   //运营商
					pricingName:undefined,  //套餐名称
					baseExpenses:undefined,//标准资费
					pricingType:undefined,  //套餐类型
					pricingStatus:undefined,  //状态
					packageType:undefined  //包体类型
				},
				// 总条数
                total: 0,
				single:'',
				multiple:'',
				tcList:[],
				title:'',    //修改套餐抬头
				loading:false,
				openTC:false,    //修改套餐弹框
				isAdd:true,   //是否是编辑弹框
				id:'',
				ids:'',  //选中的元素
				tcData:{
					pricingName:'',  //套餐名称
					upPricingid:'',  //上游套餐编码
					upPlatform:'',    //套餐来源
					ispType:'移动',   //运营商
					validDate:'',  //有效期
//					validDateSelect:'0',
					basePricingFlag:'0',
					baseExpenses:'',   //标准资费
					pricingStatus:'0',   //上下架
					effectTypeArr:[],  //生效方式
					effectType:'',//生效方式   字符串
					pricingFlow:'',  //包含流量
					pricingVoice:'',  //包含语音
					pricingSms:'',   //包含短信
					pricingType:'0',  //套餐类型
					packageType:'0',  //包体类型
					basePricingFlag:'0' //是否基础套餐
				},
				rules:{
					 pricingName:[{ required: true, message: "套餐名称不能为空", trigger: "blur" }],
					 upPlatform:[{ required: true, message: "请选择套餐来源", trigger: "change" }],
					 ispType:[{ required: true, trigger: "change" }],
					 upPricingid:[{ required: true,message: "上游套餐编码不能为空",trigger: "blur" }],
					 validDate:[{ required: true, message: "有效期不能为空",trigger: "blur" }],
					 baseExpenses:[{ required: true,message: "标准资费不能为空", trigger: "blur" }],
					 pricingType:[{ required: true, trigger: "change" }],
					 packageType:[{ required: true, trigger: "change" }],
					 basePricingFlag:[{ required: true, trigger: "change" }],
					 pricingStatus:[{ required: true, trigger: "change" }],
					 effectTypeArr:[{ required: true,message: "请选择生效类型", trigger: "change" }],
					 pricingFlow:[{ required: true,message: "包含流量不能为空", trigger: "blur" }],
				},
			}
		},
		mounted(){
			this.getTcListFn();
		},
		methods:{
			getTcListFn(){
				var queryParams = this.queryParams;
				console.log(queryParams);
				this.loading = true;
				getTcList(queryParams).then((res)=>{
					console.log(res);
					this.tcList=res.rows;
					this.loading = false;
					this.total = res.total;
				})
			},
			search(){
				this.getTcListFn();
			},
			resetQuery(){  //重置
				//queryForm
				this.resetForm("queryForm");
				this.getTcListFn();
			},
			 // 多选框选中数据
		    handleSelectionChange(selection) {
		      this.ids = selection.map(item => item.pricingId);
		      this.single = selection.length!=1
		      this.multiple = selection.length
		    },
		    resetAddData(){
		    	this.tcData={
					pricingName:'',  //套餐名称
					upPricingid:'',  //上游套餐编码
					ispType:'移动',   //运营商
					validDate:'',  //有效期
					validDateSelect:'0',
					basePricingFlag:'0',
					baseExpenses:'',   //标准资费
					pricingStatus:'1',   //上下架
					effectTypeArr:[],  //生效方式
					effectType:'',//生效方式   字符串
					pricingFlow:'',  //包含流量
					pricingVoice:'', //包含语音
					pricingSms:'',   //包含短信
					pricingType:'0',  //套餐类型
					packageType:'0',  //包体类型
					basePricingFlag:'0' //是否基础套餐
				}
		    },
		    showAdd(){  //增加一条弹框
		    	this.resetAddData();
		    	this.openTC = true;
		    	this.title = '新增套餐'
		    	this.isAdd = true;
		    },
		    addItem(){  //新增一条
		    	this.$refs["form"].validate(valid => {
			        if (valid) {
			        	var str = '';
			        	for(var i=0;i<this.tcData.effectTypeArr.length;i++){
			        	  if(this.tcData.effectTypeArr[i]=="立即生效"){
			        	  	str+='0,'
			        	  }else if(this.tcData.effectTypeArr[i]=="次月生效"){
			        	  	str+='1,'
			        	  }else if(this.tcData.effectTypeArr[i]=="到期生效"){
			        	  	str+='2,'
			        	  }
			        	}
			        	str = str.substring(0, str.lastIndexOf(','));
  						console.log(str);
			        	this.tcData.effectType = str;
			        	if(this.isAdd){  //如果是新增
			        		addTcList(this.tcData).then((res)=>{
		        			console.log(res);
		        			if(res.code=='200'){
		        				this.$message({
						          message: '新增成功',
						          type: 'success'
						        });
						      this.getTcListFn();
						      this.openTC = false;
		        			}else{
		        			  this.$message.error('新增失败');
		        			  this.openTC = false;
		        			}
		        		})
			        	}else{
			        		this.tcData.pricingId = this.id;
			        		editTcListone(this.tcData).then((res)=>{
			        			console.log(res);
		        			if(res.code=='200'){
		        				this.$message({
						          message: '修改成功',
						          type: 'success'
						        });
						      this.getTcListFn();
						      this.openTC = false;
		        			}else{
		        			  this.$message.error('修改失败');
		        			  this.openTC = false;
		        			}
			        		})
			        	}
		        		
			        }
			      });
		    },
		    editTaocan(id){  //修改套餐
		    	this.openTC = true;
		    	this.title = '修改套餐'
		    	this.isAdd = false;
		    	this.id = id;
		    	editTcList(id).then((res)=>{  
		    		console.log(res);
		    		this.tcData.pricingName = res.data.pricingName
		    		this.tcData.upPricingid = res.data.upPricingid
		    		this.tcData.ispType = res.data.ispType
		    		this.tcData.validDate = res.data.validDate
//		    		this.tcData.validDateSelect = res.data.validDateSelect
		    		this.tcData.basePricingFlag = JSON.stringify(res.data.basePricingFlag);
		    		this.tcData.baseExpenses = res.data.baseExpenses
		    		this.tcData.pricingStatus = JSON.stringify(res.data.pricingStatus)
		    		this.tcData.pricingFlow = res.data.pricingFlow
		    		this.tcData.pricingVoice = res.data.pricingVoice
		    		this.tcData.pricingSms = res.data.pricingSms
		    		this.tcData.upPlatform = res.data.upPlatform  //套餐来源
		    		this.tcData.pricingType = JSON.stringify(res.data.pricingType);
		    		this.tcData.packageType = JSON.stringify(res.data.packageType);
		    		this.tcData.basePricingFlag = JSON.stringify(res.data.basePricingFlag);
		    		var effectTypeArr = res.data.effectType.split(',');
		    		console.log(effectTypeArr)
		    		var neweffectTypeArr = [];
		    		for(var i=0;i<effectTypeArr.length;i++){
		    			if(effectTypeArr[i]=='0'){
		    				neweffectTypeArr.push('立即生效')
		    			}else if(effectTypeArr[i]=='1'){
		    				neweffectTypeArr.push('次月生效')
		    			}else if(effectTypeArr[i]=='2'){
		    				neweffectTypeArr.push('到期生效')
		    			}
		    		}
		    		this.tcData.effectTypeArr = neweffectTypeArr;
		    	})
		    },
		    cancle(){  //取消
		    	this.openTC = false;
		    },
		    daochu(){  //导出列表
		    	exportTcList().then((res)=>{
		    		console.log(res);
		    		 this.download(res.msg);
		    	})
		    },
		    upperShelf(){  //批量上架
	    		if(!this.multiple){//如果没选中
	    			this.$message.error('请先选择');
	    			return
	    		}
		    	var upData={};
		    	upData.ids = this.ids.join(',');
		    
		    	upData.up='0';
		    	console.log(upData);
		    	this.$confirm('确定执行上架吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			        upTcList(upData).then((res)=>{
			    		console.log(res);
			    		if(res.code==200){
			    			this.$message({
					            type: 'success',
					            message: '上架成功!'
					          });
					          this.getTcListFn();
			    		}else{
			    			 this.$message.error('上架失败');
			    		}
			    	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消上架'
		          });          
		        });
		    	
		    },
		    lowerShelf(){  //批量下架
		    	if(!this.multiple){//如果没选中
	    			this.$message.error('请先选择');
	    			return
	    		}
		    	var upData={};
		    	upData.ids =this.ids.join(',');
		    	upData.up='1'
		    	console.log(upData);
		    	this.$confirm('确定执行下架吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			        upTcList(upData).then((res)=>{
			    		console.log(res);
			    		if(res.code==200){
			    			this.$message({
					            type: 'success',
					            message: '下架成功!'
					          });
					          this.getTcListFn();
			    		}else{
			    			 this.$message.error('下架失败');
			    		}
			    	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消下架'
		          });          
		        });
		    },
		    changePackageType(a){  //切换包体类型
		    	this.tcData.tcData = a;
		    },
		    effectTypeFn(row,column){
		    	var arr = row.effectType.split(',');
		    	var str = '';
		    	for(var i=0;i<arr.length;i++){
		    		if(arr[i]=='0'){
		    			str+='立即生效 '
		    		}else if(arr[i]=='1'){
		    			str+='当月生效 '
		    		}else{
		    			str+='到期生效 '
		    		}
		    	}
		    	return str;
		    }
		}
	}
</script>

<style>
</style>